import React from "react";
import './login.css'
import $ from "jquery";
import aLiPay from "./images/alipay.png";
import dingDing from "./images/dingding.png";
import CenterFoot from "./centerFoot";

const styleALiPay1 = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+aLiPay+')',
  verticalAlign: 'middle',
}
const styleDingding = {
  display: 'inline-block',
  width: '20px',
  height: '20px',
  backgroundSize: 'contain',
  backgroundPosition: '0 0',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url('+dingDing+')',
  verticalAlign: 'middle',
}
const  styleEm1 ={
  zIndex: '12',
  left: '-1px',
}
const styleEm2 = {
  borderLeftColor: '#ff6a00',
}
const styleDisplay = {
  display: 'none',
}
const styleSaoma = {
  maxWidth: '34px',
}
// 点击扫码登录
const changLeft = () =>{
  $("#login-right").css("border-bottom","1px solid #d8d8d8");
  $("#login-left").css("border-bottom","3px solid #ff6a00");
  $("#saoma-login").attr("src","./img/erweima4.png");
  $("#zhma-login").attr("src","./img/person1.png");
  $("#login-foot1").css("display","none");
  $("#login-foot2").css("display","");
}
// 点击账号密码登录
const changeRight = () =>{
  $("#login-left").css("border-bottom","1px solid #d8d8d8");
  $("#login-right").css("border-bottom","3px solid #ff6a00");
  $("#saoma-login").attr("src","./img/erweima3.png");
  $("#zhma-login").attr("src","./img/person2.png");
  $("#login-foot2").css("display","none");
  $("#login-foot1").css("display","");
}
//点击扫码登录图标
const changeSaoMa = () =>{
  $("#zhma-login-type").css("display","none");
  $("#erweima-type").css("display","");
}
//点击密码登录图标
const changeMiMa = () =>{
  $("#zhma-login-type").css("display","");
  $("#erweima-type").css("display","none");
}
//点击登录
const clickLogin = () =>{
  $(".btn").click(function(){
    if($("input[name='userName']").val().trim()==undefined || $("input[name='userName']").val().trim()==""){
      $("#login-error").css("display","");
      $("#error-text").text("请输入账户名");
    }else if($("input[name='passWord']").val()==undefined || $("input[name='passWord']").val()==""){
      $("#login-error").css("display","");
      $("#error-text").text("请输入密码");
    }else if($("input[name='userName']").val().trim()!="admin" && $("input[name='passWord']").val()!="123456"){
      $("#login-error").css("display","");
      $("#error-text").text("登录名或登录密码不正确");
    }
  })
}

function Right() {
  return(
    <div id="center-right">
      <div className="login-type" id="login-left" onClick={changLeft}>
        <img src={"./img/erweima3.png"} className="login-img" id="saoma-login"/>
        <div className="login-text">扫码登录</div>
      </div>

      <div className="login-type" id="login-right" onClick={changeRight}>
        <img src={"./img/person2.png"} className="login-img" id="zhma-login"/>
        <div className="login-text">账号密码登录</div>
      </div>

      <div id="login-foot1">
        <div className="container" id="zhma-login-type">
          <div className="container-top">
            <div className="container-top-text">密码登录</div>
            <div className="container-top-img">
              <img src={"./img/erweima1.png"} id="erweima1" onClick={changeSaoMa}/>
            </div>
            <div className="login-tip">
              <div className="login-tip-arrow">
                <em style={styleEm1}></em>
                <em style={styleEm2}></em>
              </div>
              <div className="container-text">扫码登录</div>
            </div>
          </div>
          <div className="container-from">
            <div id="login-error" style={styleDisplay}>
              <div className="error-img">
                <img src={"./img/error.png"} width="16px" height="16px"/>
              </div>
              <span id="error-text"></span>
            </div>
            <div id="form-text">
              <div className="input-warp">
                <input type="text" name="userName" placeholder="邮箱/会员/8位ID" className="input-text" tabIndex="1"/>
              </div>
              <div className="input-warp">
                <input type="password" name="passWord" placeholder="请输入登录密码" className="input-text" tabIndex="2"/>
              </div>
              <div className="fm-btn">
                <button type="submit" tabIndex="3" className="btn" onClick={clickLogin}>登录</button>
              </div>
            </div>
            <div className="login-links">
              <a href={"https://passport.aliyun.com/ac/password_find.htm?lang=zh_CN&appName=aliyun&fromSite=6"+
              "&call_back_url=##returnUrl##"} target="_blank">忘记密码</a>
              <a href={"https://account.aliyun.com/find_loginid/findLoginId.htm?from=login&lang=zh_CN"}
                 target="_blank">忘记会员名</a>
              <a href={"https://account.aliyun.com/register/register.htm?"+
              "spm=5176.14694023.fszjobuve.22.72ba11dcBGugIs&oauth_callback=https%3A%2F%2Fwww.aliyun.com%"+
              "2Factivity%2F618%2Findex%3Fspm%3D5176.12825654.amxosvpfn.d83.e9392c4aav2SRw%26scm%"+
              "3D20140722.2018.5.2000"} target="_blank">免费注册</a>
            </div>
          </div>
        </div>

        <div className="container" id="erweima-type" style={styleDisplay}>
          <div className="container-top">
            <div className="container-top-text">扫码登录</div>
            <div className="container-top-img">
              <img src={"./img/computer.png"} id="computer" onClick={changeMiMa}/>
            </div>
            <div className="login-tip">
              <div className="login-tip-arrow">
                <em style={styleEm1}></em>
                <em style={styleEm2}></em>
              </div>
              <div className="container-text">密码登录</div>
            </div>
          </div>
          <div className="container-from">
            <div className="qrcode-img">
              <img src={"./img/erweima2.png"} width="140px" height="140px"/>
            </div>
            <div className="qrcode-desc">
              <img src={"./img/saoma.png"} style={styleSaoma}/>
              <p>
                打开
                <a href={"https://promotion.aliyun.com/ntms/mobile.html"} target="_blank">阿里云APP</a><br/>
                扫一扫登录
              </p>
            </div>
            <div className="qrcode-bottom-links">
              <a href={"https://promotion.aliyun.com/ntms/mobile.html"} target="_blank">下载阿里云APP</a>
              <a href={"https://account.aliyun.com/register/register.htm?oauth_callback=https%3A%2F%2Faccount.aliyun.com%"+
              "2Flogin%2Flogin_aliyun.htm%3Foauth_callback%3Dhttps%253A%252F%252Fwww.aliyun.com%252Factivity%252F618%252Findex%"+
              "253Fspm%253D5176.12825654.amxosvpfn.d83.e9392c4aav2SRw%2526scm%253D20140722.2018.5.2000"}
                 target="_blank">免费注册</a>
            </div>
          </div>
        </div>
      </div>

      <div id="login-foot2" style={styleDisplay}>
        <div>
          <div className="app-warp">
            <div className="alipay-text">扫码后点击“确认授权”，即可完成账号绑定及登录</div>
            <div className="alipay-text">支持扫码登录的APP:</div>
            <div className="alipay-icon">
              <div className="alipay-icon alipay" style={styleALiPay1}></div>
              <span>支付宝APP</span>
              <div className="alipay-icon dingding" style={styleDingding}></div>
              <span>钉钉APP</span>
            </div>
          </div>
          <img src={"./img/erweima5.png"} className="erweima5" height="190px" width="190px"/>
        </div>
        <div className="app-foot">
          <a href={"https://account.aliyun.com/register/qr_register.htm?"+
          "oauth_callback=https%3A%2F%2Fwww.aliyun.com%2F%3Fspm%3D5176.12901015.0.i12901015.3f68525cBGXfn6"}
             target="_top">免费注册</a>
        </div>
      </div>

      <CenterFoot></CenterFoot>
    </div>
  );
}

export default Right;